<template>
  <ElSubMenu v-if="menuItem.children && menuItem.children.length" :index="menuItem.index">
    <template #title>
      <span>{{ menuItem.title }}</span>
    </template>
    <AppMenuInner
      v-for="item in menuItem.children"
      :menu-item="item"
      :key="item.index"
    ></AppMenuInner>
  </ElSubMenu>
  <ElMenuItem v-else :index="menuItem.index">{{ menuItem.title }}</ElMenuItem>
</template>
<script setup>
defineProps({
  menuItem: {
    type: Object,
  },
})
</script>
<style lang="less">
.el-sub-menu.is-active .el-sub-menu__title {
  background-color: #ecefff;
}
</style>
